<template>
    <div>
        <el-card class="box-card">
            <el-form label-width="100px" v-if="userInfo!==null">
                <el-form-item label="头像">
                    <div class="user-avatar-container" @click="showAvatarDialog">
                        <img fit="cover" v-if="userInfo.avatar" :src="userInfo.avatar"
                             class="avatar"/>
                    </div>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input type="text" v-model.trim="userInfo.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="个人签名">
                    <el-input type="text" v-model.trim="userInfo.sign" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户ID">
                    <el-input type="text" v-model.trim="userInfo.id" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址">
                    <el-input v-model.trim.number="userInfo.email" disabled></el-input>
                    <el-button type="primary" class="btn" @click="toUpdateEmailPage">修改邮箱</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateUserInfo">修改账号信息</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="user-info-dialog">
            <!--  field="file" 后台文件名 ;
                  url="/admin/image" 上传图片的接口地址 -->
            <avatar-upload field="file"
                           @crop-upload-success="cropUploadSuccess"
                           @crop-upload-fail="cropUploadFail"
                           v-model.trim="showAvatarCutter"
                           :width="300"
                           :height="300"
                           url="/admin/image/avatar"
                           img-format="png"></avatar-upload>
        </div>
    </div>
</template>

<script>
    import {checkToken, checkUsername, updateUserInfo} from '@/api/api'
    import avatarUpload from 'vue-image-crop-upload/upload-2.vue';

    export default {
        name: "Info",
        components: {
            'avatar-upload': avatarUpload
        },
        data() {
            return {
                userInfo: null,
                showAvatarCutter: false,
                lastUsername: '',
                baseUrl: this.blog_constant.baseUrl
            }
        },
        created() {
            this.getUserInfo()
        },
        methods: {
            // 修改用户信息
            updateUserInfo() {
                // 检查数据
                if (this.userInfo.username === '') {
                    this.$message.error('用户名不可以为空')
                    return;
                }
                // 如果用户名和原来的用户名一致，调用方法检查头像，上传头像
                if (this.lastUsername === this.userInfo.username) {
                    this.doUpdateInfo()
                } else {
                    // 调用接口检查用户名是否已存在
                    checkUsername(this.userInfo.username).then(response => {
                        if (response.code === 40000) { // 后端 40000 用户名未注册
                            this.doUpdateInfo()
                            // this.$message.success(response.message)
                        } else {
                            this.$message.error(response.message)
                        }
                    })
                }
            },
            // 上传头像
            doUpdateInfo() {
                if (this.userInfo.avatar === '') {
                    this.$message.error('头像不可以为空')
                    return;
                }
                // 调用接口更新用户信息
                updateUserInfo(this.userInfo).then(response => {
                    if (response.code === 20000) {
                        this.getUserInfo()
                        this.$message.success(response.message)
                    } else {
                        this.$message.error(response.message)
                    }
                })
            },
            // 显示上传头像工具
            showAvatarDialog() {
                this.showAvatarCutter = true
            },
            // 上传成功（用户头像）
            cropUploadSuccess(response) {
                // console.log(status, field)
                // console.log(field)
                if (response.code === 20000) {
                    this.$message.success(response.message)
                    // 回显头像
                    this.userInfo.avatar = this.blog_constant.baseUrl + '/admin/image/' + response.data.id;
                    // this.showAvatarCutter = false
                } else {
                    this.$message.error(response.message)
                }
            },
            // 上传失败
            cropUploadFail() {
                this.$message.error('上传失败')
            },
            // 跳转到修改邮箱页面
            toUpdateEmailPage() {
                this.$router.push({path: "/settings/email"})
            },
            // 获取用户信息
            getUserInfo() {
                checkToken().then(response => {
                    if (response.code === 20000) {
                        this.userInfo = response.data
                        // 将用户名同时赋值给一个新的变量待用
                        this.lastUsername = this.userInfo.username
                        // this.$message.success(response.message)
                    } else {
                        this.$message.error(response.message)
                    }
                })
            }
        }
    }
</script>
<style>
    .el-card {
        width: 700px;
        margin: 20px auto;
    }

    .el-input {
        max-width: 350px;
    }

    .btn {
        margin-left: 20px;
    }

    /* 上传组件的样式 */
    .avatar {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        width: 178px;
        height: 178px;
        display: block;
    }

</style>